<template>
    <div>
        <div class="bgimg">
            <el-form-item label="店招背景："></el-form-item>
            <img style="width: 100px;height:100px;" :src="tempValue.bgPicUrl"/>
            <el-input v-model="tempValue.bgPicUrl" ></el-input>
            <el-button type="primary" @click="changebgimage">选择背景图片</el-button>
        </div>
        <el-form-item label="店招介绍：">
            <el-input v-model="tempValue.storeDesc" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <change-image ref="changeimg" albumType="store" imgnum="1" @returnPicture="getPicture"></change-image>
    </div>
</template>
<script>
    import {mapState, mapGetters} from 'vuex';
    import changeImage from '../../components/changeImage';
    export default {
        name: "qkStoreHeaderAttr",
        props: {
            prop: {
                type: Object,
                default() {
                    return {
                        shopFlex:'2',
                        bgPicUrl:"https://keytest.oss-cn-zhangjiakou.aliyuncs.com/upload/store/1191974507350003713/2020/04/d26e22bf81084b0eb8a32036e3b86497_968-380.jpg",
                        storeDesc:"",
                    }
                },
            }
        },
        components: {
	        changeImage
        },
        data() {
            return {
                tempValue: {}
            }
        },
        methods:{
	        changebgimage(){
	        	this.$refs.changeimg.open();
            },
	        getPicture(e){
	        	this.tempValue.bgPicUrl = e;
            }
        },
        mounted() {
            this.tempValue = this.prop;
        },
        watch: {
            tempValue(e) {
            	console.log(e)
                this.$store.commit("updateActiveElementProp",e);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bgimg{
        height:300px;
        display: flex;
        justify-content: space-around;
        flex-flow: column nowrap;
    }
    .arrt-eidt-wrapper{
        display: flex;
    .arrt-eidt-l{
        width: 108px;
    }
    .arrt-eidt-r{
        flex: 1;
    }
    }
</style>


